<template>
  <div
    class="doctor-card"
    :data-index="index"
    :style="{ background: background }"
  >
    <template v-if="!doctor?.doctorName">
      <div class="doctor-card-empty">
        <img :src="DoctorEmpty" alt="">
      </div>
    </template>
    <template v-else>
      <div class="doctor-card-title">
        <div>{{ doctor?.doctorName }}</div>
        <div class="doctor-level">{{ doctor?.doctorLevelName }}</div>
      </div>
      <div class="doctor-card-desc">
        <div class="doctor-card-desc-photo">
          <span class="photo-wrapper">
            <span v-if="!doctor?.doctorPhoto" class="empty-photo">
              <img :src="DoctorPhotoEmpty" alt="" />
            </span>
            <img 
              v-else 
              class="doctor-photo" 
              :src="baseUrl + doctor.doctorPhoto"
              @error="$event.target.src = DoctorPhotoEmpty"
            />
          </span>
        </div>
        <div class="doctor-card-desc-remark">
          <pre class="remark-text">{{ doctor?.doctorAbility }}</pre>
        </div>
      </div>
      <div class="doctor-card-schedule">
        <div v-for="schedule in doctor?.listCategory" :key="schedule.categoryId">
          <span>{{ schedule.categoryName }}:</span>
          <span v-for="(clinchours, clinicIndex) in schedule.listClinicHours">
            <span style="display: inline-block; margin: 0 0.1rem">{{
              weekDay[clinchours.scheduleWeek]
            }}</span>
            <span>{{ clinchours.clinicHoursName }}</span>
            <span v-if="clinicIndex < schedule.listClinicHours.length - 1"
              >,</span
            >
          </span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { EnvConfig } from "@/utils/index.js";
import { weekDay } from "../config.js";
import DoctorPhotoEmpty from "@/assets/images/doctor_empty.jpeg";
import DoctorEmpty from "@/assets/images/logo.png";
const props = defineProps({
  doctor: {
    type: Object,
    default: () => ({}),
  },
  index: {
    type: Number,
    default: 0,
  },
  background: {
    type: String,
    default: "",
  },
});

const baseUrl = computed(() => EnvConfig.baseApi);
</script>
<style scoped lang="scss">
.doctor-card {
  display: flex;
  &[data-index="0"],
  &[data-index="2"],
  &[data-index="4"] {
    background: #d8f9fd;
  }
  &[data-index="1"],
  &[data-index="3"],
  &[data-index="5"] {
    background: #d7fadc;
  }
  width: 100%;
  height: 100%;
  border-radius: 0.08rem;
  flex-direction: column;
  &-title {
    flex: 0 0 0.5rem;
    border-bottom: 0.02rem solid #4c73c2;
    display: flex;
    font-weight: bold;
    padding: 0 0.1rem;
    align-items: center;
    font-size: 0.35rem;
  }
  &-desc {
    flex: auto;
    min-height: 0;
    padding: 0;
    display: flex;
    &-photo {
      flex: 0 0 1.15rem;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
      padding: 0.05rem;
    }
    &-remark {
      flex: auto;
      min-width: 0;
      font-size: 0.22rem;
      padding: 0.05rem;
      overflow: hidden;
    }
  }
  &-schedule {
    flex: 0 0 0.6rem;
    display: flex;
    padding: 0 0.1rem;
    font-size: 0.23rem;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
  }
}

.doctor-level {
  padding-left: 0.5rem;
  font-size: 0.3rem;
}

.photo-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  justify-content: flex-start;
}

.empty-photo {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}

.doctor-photo {
  width: 100%;
  height: 100%;
}

.remark-text {
  white-space: break-spaces;
}

.doctor-card-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  img {
    width: 50%;
    height: auto;
    opacity: 0.1;
  }
}
</style>
